<template>
  <Page >
    <div class="login">
      <div class="login-form">
        <image src="/static/logo.png" style="width: 100%"></image>
        <div class="logo">
          城通物享 CT Link
        </div>
        <div class="form-item">
          <image src="/static/user.png" style="width: 32rpx;height: 32rpx"></image>
          <div class="input-box">
            <input placeholder="请输入用户名" v-model="loginForm.username"/>
          </div>
        </div>
        <div class="form-item">
          <image src="/static/password.png" style="width: 32rpx;height: 32rpx"></image>
          <div class="input-box">
            <input type="password" placeholder="请输入密码" v-model="loginForm.password"/>
          </div>
        </div>
        <div class="login-button">
          <div class="primary-button large" @click="submitForm">登录</div>
        </div>
        <div class="login-tips">
          <div @click="navTo">未注册？去注册</div>
        </div>
      </div>
<!--      <view class="footer">-->
<!--        <view class="check" style="display: flex;align-items: center">-->
<!--          <div style="display: flex;align-items: center" @click="setAgree()">-->
<!--            <image v-if="agree" class="publish-icon" src="@/static/radio_fill.png"></image>-->
<!--            <image v-else class="publish-icon" src="@/static/radio.png"></image>-->
<!--            <text style="color: #333">我已阅读并同意</text>-->
<!--          </div>-->
<!--          <text style="color: #0962c4"  @click="setAgree2()">《{{ policy.name || ''}}》</text>-->
<!--        </view>-->
<!--      </view>-->
    </div>
  </Page>
</template>
<script>
import Page from "../../components/Page.vue";

export default {
  name: "index",
  components: { Page },
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      agree: false,
      policy: {
        name: '用户协议'
      },
    }
  },
  onLoad() {
  },
  methods: {
    navTo() {
      uni.navigateTo({
        url: '/pages/login/register'
      })
    },
    submitForm() {
      // if (!this.agree) {
      //   uni.showToast({
      //     title: '请先阅读并同意用户协议',
      //     icon: 'none'
      //   })
      //   return
      // }
      if (!this.loginForm.username) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        })
        return
      }
      if (!this.loginForm.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return
      }
      uni.showLoading({
        title: '登录中...'
      })
      this.$api.login({
        ...this.loginForm,
      }).then(response => {
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        this.$store.commit('SET_USERINFO', response)
        this.$store.commit('SET_ROLE', response.role)
        uni.switchTab({
          url: '/pages/resource/index'
        })
      }).finally(() => {
        setTimeout(() => {
          uni.hideLoading()
        }, 1000)
      })
    },
    setAgree(){
      this.agree =! this.agree;
    },
    setAgree2() {
      uni.navigateTo({
        url: '/pages/policy/policy?id=' + this.policy.id
      })
    },
  }

}
</script>

<style lang="scss">
.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page {
  .login {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .role {
      display: flex;
      align-items: center;
      .role-item {
        background-color: transparent;
        color: #666666;
      }
      .role-item.active {
        background-color: #0962c4 !important;
        color: #fff;
      }
    }
    .logo {
      margin: 10rpx auto 20rpx;
      height: 100rpx;
      text-align: center;
      font-size: 48rpx;
      font-weight: bold;
      z-index: 3;
      color: #0962c4;
    }
    .button-item{
      margin: 0;
      padding: 0;
      outline: none;
      border-radius: 0;
      background-color: transparent;
      line-height: inherit;
      margin-top: 60rpx;
    }
    .button-item::after{
      border: none;
    }
    .login-type-text {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      padding-top: 12rpx;
      color: #666666;
    }

    .other {
      margin-top: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .o-line {
        width: 180rpx;
        height: 1px;
        background: #CCCCCC;
      }
      .o-text {
        margin: 0 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #999999;
      }
    }
    .role {
      margin: 20rpx auto;
      width: 630rpx;
    }
    .form-item {
      width: 630rpx;
      background: rgba(255,255,255,0.5);
      border-radius: 20rpx;
      margin: 20rpx auto;
      padding: 24rpx 32rpx;
      display: flex;
      align-items: center;
      .input-box {
        padding-left: 24rpx;
      }
    }
    .login-button {
      padding: 60rpx 0 30rpx 0;
      display: flex;
      align-items: center;
      justify-content: center;
      .primary-button {
        width: 630rpx
      }
    }
    .footer {
      width: 100%;
      font-size: 28rpx;
      color: #999;
      display: flex;
      justify-content: center;
      margin-top: 30rpx;
      .publish-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
    }

    .tips {
      text-align: center;
      line-height: 88rpx;
      color: #666666;
    }
  }
}
</style>
